<template>
  <Card class="card_style_s_setting" :bordered="false" :dis-hover="true">
    <Row style="margin-bottom: 10px;">
      <Col span="6">
        <span>规则名称：</span>
        <Input style="width: 70%;" v-model="search_title" placeholder="规则名称" @on-change="searchData1"/>
      </Col>
      <Button type="info" @click="filterData"><Icon type="ios-search" /> 搜索</Button>
      <Button type="info" @click="addInfo" style="margin-left: 10px"><Icon type="md-add" /> 创建</Button>
    </Row>
    <Table border :columns="columns1" :data="datalist"></Table>

    <Modal v-model="modalInfo.modal1" title="规则信息" width="700" cancel-text="关闭"
    @on-ok="okok" @on-cancel="modalInfo.modal1 = false" ok-text="确定">
      <Form :model="modalInfo"  >
        <Row class="item_s_setting">
          <Col span="7" style="text-align: right">规则名称：</Col>
          <Col span="12" v-if="!modalInfo.update">{{modalInfo.title}}</Col>
          <Col span="12" v-if="modalInfo.update">
            <Input v-model="modalInfo.title"></Input>
          </Col>
        </Row>
        <Row class="item_s_setting">
          <Col span="7" style="text-align: right">最低分：</Col>
          <Col span="12" v-if="!modalInfo.update">{{modalInfo.min_number}}</Col>
          <Col span="12" v-if="modalInfo.update">
            <Input v-model="modalInfo.min_number">
              <span slot="append">分</span>
            </Input>
          </Col>
        </Row>
        <Row class="item_s_setting">
          <Col span="7" style="text-align: right">最高分：</Col>
          <Col span="12" v-if="!modalInfo.update">{{modalInfo.max_number}}</Col>
          <Col span="12" v-if="modalInfo.update">
            <Input v-model="modalInfo.max_number">
              <span slot="append">分</span>
            </Input>
          </Col>
        </Row>
        <Row class="item_s_setting">
          <Col span="7" style="text-align: right" class="">状态：</Col>
          <Col span="12" v-if="!modalInfo.update">{{modalInfo.status}}</Col>
          <Col span="12" v-if="modalInfo.update">
            <RadioGroup v-model="modalInfo.status">
              <Radio label="可用"></Radio>
              <Radio label="不可用"></Radio>
            </RadioGroup>
          </Col>
        </Row>
      </Form>
    </Modal>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      modalInfo: { modal1: false },
      search_title: '',
      columns1: [
        { title: '序号', type: 'index', width: '100', align: 'center' },
        { title: '规则名称', key: 'title' },
        {
          title: '分数范围',
          key: 'min_number',
          width: '200',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.min_number + ' - ' + params.row.max_number + '分')
          }
        },
        { title: '状态', key: 'status', width: '150', align: 'center' },
        {
          title: '操作',
          key: 'action',
          width: '270',
          className: 'nopadding',
          align: 'center',
          render: (h, params) => {
            let array = []
            array.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.showInfo(params.row, true)
                  }
                }
              }, '编辑')
            )
            array.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.showInfo(params.row, false)
                  }
                }
              }, '详情')
            )
            array.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    let title = ''
                    if (params.row.status === '可用') {
                      title = '确认停用当前规则！'
                    } else {
                      title = '确认启用当前规则！'
                    }
                    this.$Modal.confirm({
                      title: title,
                      onOk: () => {
                        params.row.status = params.row.status === '可用' ? '不可用' : '可用'
                      }
                    })
                  }
                }
              }, params.row.status === '可用' ? '停用' : '启用')
            )
            array.push(
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.deleteInfo(params.row)
                  }
                }
              }, '删除')
            )
            return h('div', array)
          }
        }
      ],
      datalist: [],
      datalist_bak: []
    }
  },
  methods: {
    filterData () {
      this.datalist = []
      if (this.search_title) {
        this.datalist_bak.forEach(element => {
          if (element.title.indexOf(this.search_title) >= 0) {
            this.datalist.push(element)
          }
        })
      } else {
        this.datalist = this.datalist_bak
      }
    },
    searchData1 () {
      if (!this.search_title) {
        this.filterData()
      }
    },
    addInfo () {
      this.modalInfo = { modal1: true, status: '不可用', update: true }
    },
    showInfo (obj, flag) {
      this.modalInfo = {
        modal1: true,
        update: flag,
        index: obj._index,
        title: obj.title,
        min_number: obj.min_number,
        max_number: obj.max_number,
        status: obj.status
      }
    },
    deleteInfo (obj) {
      this.$Modal.confirm({
        title: '确认删除当前规则！',
        onOk: () => {
          this.datalist.splice(obj._index, 1)
          this.$Notice.success({ title: '成功' })
        }
      })
    },
    okok () {
      let temp = this.datalist[this.modalInfo.index] || {}
      temp.title = this.modalInfo.title
      temp.min_number = this.modalInfo.min_number
      temp.max_number = this.modalInfo.max_number
      temp.status = this.modalInfo.status
      if (this.modalInfo.index || this.modalInfo.index >= 0) {
        console.log(temp)
      } else {
        this.datalist_bak.push(temp)
        this.filterData()
      }
    }
  },
  mounted () {
    this.datalist_bak.push({ title: '创新思路', min_number: 1, max_number: 10, status: '可用' })
    this.datalist_bak.push({ title: '技术应用', min_number: 5, max_number: 10, status: '不可用' })
    this.datalist_bak.push({ title: '解决问题', min_number: 1, max_number: 10, status: '可用' })
    this.datalist_bak.push({ title: '推广问题', min_number: 1, max_number: 20, status: '可用' })
    this.datalist_bak.push({ title: '问题的可行性分析', min_number: 1, max_number: 10, status: '可用' })
    this.datalist_bak.push({ title: '事项问题的跟进', min_number: 1, max_number: 5, status: '可用' })
    this.datalist_bak.push({ title: '阶段性报告', min_number: 10, max_number: 30, status: '可用' })
    this.filterData()
  }
}
</script>

<style lang="less">
  .card_style_s_setting {
      height: 100%;
      width: 100%;
      overflow: hidden;
  }
    .ivu-card-body {
      padding: 0px;
    }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item_s_setting {
    height: 42px;
    line-height: 40px;
  }
</style>
